import { Routes, Route, BrowserRouter } from "react-router-dom";
import React, { Suspense, lazy } from "react";
import App from "App";
import Loading from "../components/Loading"

interface Iroute {
  path: string;
  component: React.FC<any> | any;
  children?: Iroute[];
}

let routeArr: Iroute[] = [
  {
    path: "/",
    component: App,
    children: [
      { path: "edit/:id", component: lazy(() => import("../views/Edit")) },
      { path: "edit", component: lazy(() => import("../views/Edit")) },
      { path: "list", component: lazy(() => import("../views/List")) },
      { path: "means", component: lazy(() => import("../views/Means")) },
      { path: "namelist", component: lazy(() => import("../views/NameList")) },
      { path: "adminlist", component: lazy(() => import("../views/AdminList")) },
    ],
  },
  { path: "/login", component: lazy(() => import("../views/Login")) },
  { path: "/register", component: lazy(() => import("../views/Register")) },
  { path: "/forgetPassword", component: lazy(() => import("../views/Forgetpassword")) }
];

const MyRouter = () => (
  <BrowserRouter>
    <Suspense fallback={<Loading/>}>
      <Routes>
        {
          routeArr.map((item, index) => {
            return (
              item.children? 
              // 有子路由
              <Route key={index} path={item.path} element={<item.component />}>
                {
                  item.children.map((e,i)=> <Route key={i} path={e.path} element={<e.component />}></Route>)
                }
              </Route>
              :
              // 没有子路由
              <Route key={index} path={item.path} element={<item.component />}></Route>
            )
          })
        }
      </Routes>
    </Suspense>
  </BrowserRouter>
);

export default MyRouter;
